<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/html/head :: head_Normal(~{::title},~{::link},~{::style})">

<title th:text=${title}></title>

<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">
<link th:href="@{/static/admin/assets/js/bootstrap/css/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet"/>
<link rel="stylesheet" th:href="@{/static/admin/assets/js/button/ladda/ladda.min.css}">

<style type="text/css">
.select-list ul li{
	list-style-type: none;
	float: left;
}
.timeBut{
    float: left;
    padding-top: 15px
}
.timeBut2{
    float: left;
    padding-top: 10px
}
.tableDiv{
	max-height:500px;
	overflow-y:scroll;
}
.acollapse {
	cursor: pointer;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url();
}
.aexpand {
	cursor: pointer;
    background-position: left center;
    background-repeat: no-repeat;
    background-image: url();
}
.smtd {
    font-size: 11px;
    line-height: 1;
}
</style>

</head>

<body id="listbody">

<!-- 右边内容 -->
<div class="wrap-fluid">
    <div class="container-fluid paper-wrap bevel tlbr">
        <!-- 内容 -->
        <div class="content-wrap">
            <!-- 结束内容 -->
            <div class="row">
                <div class="col-sm-12">
                    <!-- 搜索条件 -->

                    <div class="nest" id="inlineClose">
                        <div class="title-alt">
                            <h6>搜索条件</h6>
                            <div class="titleClose">
                                <a class="gone" href="#inlineClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#search_div">
                                    <span class="entypo-down-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="search_div"  style="display: block">
                            <div class="form_left">
                                <form role="form" class="form-inline">
                                    <div class="form-group">
                                        <label class="control-label timeBut2" >所属APP：</label>
                                        <select name="app" id="apps"  onchange="appNameChanged()" class="form-control">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label timeBut2" >规则key：</label>
                                        <select name="rule" id="rule" class="form-control">
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label class="control-label timeBut2">热Key：</label>
                                        <input type="text" name="key" placeholder="key"class="form-control" style="width: 57%">
                                    </div>
                                    <button onclick="$.table.search(this)" class="btn btn-success" type="button"><i class="fa fa-search"></i>&nbsp;搜索</button>
                                </form>
                            </div>
                        </div>
                    </div>
                    <!-- END搜索条件 -->
                    <!-- 空白页开始-->
                    <div class="nest" id="Blank_PageClose">
                        <div class="title-alt">
                            <h6>表单</h6>
                            <div class="titleClose">
                                <a class="gone" href="#Blank_PageClose">
                                    <span class="entypo-cancel"></span>
                                </a>
                            </div>
                            <div class="titleToggle">
                                <a class="nav-toggle-alt" href="#Blank_Page_Content">
                                    <span class="entypo-up-open"></span>
                                </a>
                            </div>
                        </div>

                        <div class="body-nest" id="Blank_Page_Content">
                            <table id="dataTable" class="table-striped footable-res footable metro-blue" data-page-size="6">

                            </table>

                        </div>
                    </div>
                </div>
                <!-- 空白页结束 -->
            </div>
            <!-- 结束内容 -->
        </div>
    </div>
</div>
<!-- 结束右边内容 -->

<!-- 热键值 -->
<div id="hotkeyValueModel" class="modal fade" tabindex="-1" aria-hidden="false">
	<div class="modal-dialog" style="width:1001px;">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="leapKey"><b id="hotkeyKey"></b>在各个服务器的值</h4>
			</div>
			<div class="tableDiv">
		        <table class="table table-striped table-hover" style="margin-top: 0px;word-break:break-all; word-wrap:break-all;">
			        <colgroup>
						<col width="160px">
						<col width="140px">
						<col width="50px">
						<col>
					</colgroup>
	                <thead>
		                <tr>
		                	<td>实例</td>
		                	<td>创建时间</td>
		                	<td>有值</td>
		                    <td>value</td>
		                </tr>
	                </thead>
	                <tbody id="hotkeyValueBody">
	                </tbody>
	            </table>
			</div>
		</div>
	</div>
</div> <!-- 热键值结束 -->

<!-- 通用js -->
<div th:include="admin/common/html/js :: onload_js">
   
</div>
<!-- bootstarp 表格 -->
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/bootstrap-table.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/bootstrap-table/locale/bootstrap-table-zh-CN.min.js}" type="text/javascript"></script>
<script th:src="@{/static/admin/assets/js/bootstrap/js/base_list.js}" type="text/javascript"></script>

<!-- 弹窗 -->
<script th:src="@{/static/admin/assets/js/layer/layer.js}" type="text/javascript"></script>
<!-- 遮罩层 -->
<script th:src="@{/static/admin/assets/js/blockUI/jquery.blockUI.js}" type="text/javascript"></script>

<script type="text/javascript">
var dataUrl="/key/listTimely";
var removeUrl="/key/remove";
var options = {
    dataUrl: dataUrl,
    removeUrl: removeUrl,
    showRefresh: false,
    showColumns: false,
    sortName: "createTime",
    modalName: "KEY",
    search: false,
    dataColumns: [
        { field: 'key', title: 'key', visible: false},
        { field: 'realHotKey', title: '热key', 
        	formatter:function (val,row,index) {
            	return "<a href='#' onclick=\"showValue('"+row.key+"','"+val+"')\">"+val+"</a>";
        	}
        },
        { field: 'appName', title: '所属APP'},
        { field: 'rule', title: '所属规则'},
        { field: 'duration', title: '剩余缓存时间(秒)'},
        { field: 'createTime', title: '创建时间',
            formatter:function (val,row,index) {
                return changeDateFormat(val);
            }
        },{
            title: '操作',
            formatter: function (value, row, index) {
                var id = row.id;
                var actions = [];
                actions.push('<a class="btn btn-danger btn-xs" href="#" onclick="$.operate.remove(\'' + (row.appName+"/"+row.key) + '\')"><i class="fa fa-remove"></i>删除</a>');
                return actions.join('');
            }
        }]
};
$(function(){

    $.ajax({
        cache : true,
        type : "POST",
        url : "/user/info",
        async : false,
        error : function(XMLHttpRequest){
            $.modal.alertError(XMLHttpRequest.responseJSON.msg);
        },
        success : function(data) {
            var apps = data.appNames;
            for (var i = 0; i < apps.length; i++) {
                $("#apps").append("<option>" + apps[i] + "</option>");
            }
            appNameChanged();
        }
    });


    $('#hotkeyValueModel').on('hidden.bs.modal', function () {
    	$("#hotkeyValueBody").html("<tr><td colspan=4 align='center'>暂无数据</td><tr>");
    });
})

    // 下拉框联动
    function appNameChanged() {
        var appName = $('#apps option:selected').val();
        $.getJSON('/rule/appRules?appName='+appName, function (data) {
            $("#rule").empty();
            for (var i = 0; i < data.length; i++) {
                var keyRule = data[i];
                $("#rule").append("<option>" + keyRule.key + "</option>");
            }
            var oTab=$.table.oTableInit(options);
            oTab.Init();
        });
    }
    
    function showValue(key, showKey){
    	$("#hotkeyKey").html(showKey);
    	$("#hotkeyValueModel").modal("show");
   	 	$.ajax({
        	url: "/key/value",
         	type: "POST",
	         data:{
	        	 appName: $("#apps").val(),
	        	 key: key
	         },
         	dataType: "json",
         	success: function(data){
         		$("#hotkeyValueBody").html("<tr><td colspan=4 align='center'>暂无数据</td><tr>");
         		if(!data){
         			return;
         		}
         		if(data.status != 200){
         			alert(data.message);
         			return;
         		}
         		var body;
         		var map = data.result;
         		for(var key in map){
         			var dt = map[key];
         			var jsonData = null;
         			if(dt && dt.hasOwnProperty("value")){
         				jsonData = JSON.stringify(dt.value);
         			}
         			body += "<tr>";
         			body += "<td>";
         			body += key;
         			body += "</td>";
         			body += "<td>";
         			if(dt && dt.hasOwnProperty("createTime")){
         				body += timestampToTime(dt.createTime);
         			}
         			body += "</td>";
         			body += "<td>";
         			if(dt && dt.hasOwnProperty("defaultValue")){
         				body += dt.defaultValue ? "否" : "是";
         			}
         			body += "</td>";
        			body += "<td class='smtd'>";
        			if(jsonData == null){
        				body += "暂无";
        			} else {
	         			if(jsonData.length > 300){
	         				body += jsonData.substring(0, 300)+"<span class='acollapse' onclick='toggleData(this)'>&nbsp;&nbsp;&nbsp;&nbsp;</span><span style='display:none;'>"+jsonData.substring(300)+"</span>"
	         			} else {
	         				body += jsonData;
	         			}
        			}
         			body += "</td>";
         			body += "</tr>";
         		}
       			$("#hotkeyValueBody").html(body);
       			$("[data-toggle='tooltip']").tooltip({container: 'body'});
 		   	},
         	error:function(err){
           		console.log(err.statusText);
         	}
    	});
    }
    
    function toggleData(com){
    	$(com).next().toggle();
    	if($(com).hasClass("acollapse")){
    		$(com).removeClass("acollapse").addClass("aexpand");
    	} else {
    		$(com).removeClass("aexpand").addClass("acollapse");
    	}
    }
</script>

</body>

</html>
